<!DOCTYPE html>
<html>
	<head>
		<title>用户列表</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<!-- 所有的 css 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="../static/sa.css"> 
		
		<!-- 所有的 js 资源 -->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
		
		<style type="text/css">
			
		</style>
		
	</head>
	<body>
		
		<!-- 防止margin向下击穿 -->
		<div style="margin-top: -1em;"><br></div>
		
		<div class="vue-box">
			
			<!-- 参数栏 -->
			<div class="c-panel">
				<div class="c-title">检索参数</div>
				<el-form ref="form">
	
					<div class="c-item">
						<label class="c-label">昵称：</label>
						<el-input size="small" v-model="p.username" placeholder="模糊搜索" @keyup.enter="f5"></el-input>
					</div>
					
					<div class="c-item">
						<label class="c-label">注册方式：</label>
						<el-select size="small" v-model="p.create_type">
							<el-option label="全部" :value="0"></el-option>
							<el-option label="账号注册" :value="1"></el-option>
							<el-option label="手机号注册" :value="2"></el-option>
							<el-option label="邮箱注册" :value="3"></el-option>
						</el-select>
					</div>
					
					<div class="c-item" style="min-width: 0px;">
						<el-button type="primary" icon="el-icon-search" size="small" @click="f5">查询</el-button>
					</div>
					
					<br />
					<div class="c-item">
						<label class="c-label">排序：</label>
						<el-radio-group v-model="p.sort_type">
							<el-radio :label="1">注册时间</el-radio>
							<el-radio :label="2">最近登录</el-radio>
							<el-radio :label="3">登陆次数</el-radio>
							<el-radio :label="4">最近签到</el-radio>
							<el-radio :label="5">签到次数</el-radio>
							<el-radio :label="6">魅力值</el-radio>
						</el-radio-group>
					</div>

				</el-form>

			</div>
			
			<!-- 数据栏 -->
			<div class="c-panel">			
				<div class="c-title">列表</div>
				<el-table class="data-table" :data="dataList" size="small" border style="width: 100%">
					
					<el-table-column label="编号" prop="id" width="70px" > </el-table-column>
					<el-table-column label="昵称" prop="username" width="200px">
						<template slot-scope="scope">
							<img :src="scope.row.avatar" style="width: 3em; height: 3em; float: left; margin-right: 1em; border-radius: 50%;" >
							<div style="float: left; width: 130px; line-height: 20px;">
								<b>{{scope.row.username}}</b>
								<p>{{scope.row.tell}}</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="个人相册">
						<template slot-scope="scope">
							<img :src="scope.row.photo_list[0]" style="width: 40px; height: 40px; cursor: pointer;" @click="pre_img(scope.row)" >
							共{{scope.row.photo_list.length}}张, 点击预览
						</template>
					</el-table-column>

					<el-table-column label="注册方式" prop="create_type"></el-table-column>
					<el-table-column label="注册于" prop="create_time"></el-table-column>
					<el-table-column prop="address" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="dongjie(scope.row)">冻结</el-button>
							<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
		

			</div>
			
			<!-- 分页栏 -->
			<div class="c-panel">	
				<el-pagination background layout="total, prev, pager, next, sizes, jumper" 
					:current-page="page.pageNo" :page-size="page.pageSize" :total="page.count" 
					:page-sizes="[1, 10, 20, 30, 40, 50, 100]"
					@current-change="pageNo_f5" @size-change="pageSize_f5">
				</el-pagination>
			</div>
			
			<br><br><br><br><br><br><br><br><br>

			
		</div>
		
		
		<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
		<script src="../static/kj/layer/layer.js"></script>
		<script src="data-list.js"></script>
		<script type="text/javascript">
			
			new Vue({
				el: '.vue-box',
				data: {
					p: {	// 查询参数 
						username: '',
						create_type: 0,
						sort_type: 1,
					},
					page: {	// 分页信息
						pageNo: 1,
						pageSize: 10,
						count: 1422
					},
					dataList: dataList
				},
				methods: {
					// 数据刷新
					f5: function(pageNo) {
						this.$message('数据刷新, 参数：' + JSON.stringify(this.p));
					},
					// 分页刷新
					pageNo_f5: function(pageNo) {
						this.$message('切换当前页：' + pageNo);
					},
					pageSize_f5: function(pageSize) {
						this.$message('切换页大小：' + pageSize);
					},
					// 预览图片
					pre_img: function(data) {
						var list = data.photo_list;
						var arr_list = [];
						list.forEach(function(item) {
							arr_list.push({
								alt: '左右键切换',
								pid: 1,
								src: item,
								thumb: item
							})
						})
						layer.photos({
							photos: {
								title: data.username + '的个人相册',
								id: data.id,
								start: 0,
								data: arr_list
							}
							,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
						});

					},
					// 删除
					del: function(data) {
						var index = this.dataList.indexOf(data);
						this.dataList.splice(index, 1);
						this.$message({message: '删除成功', type: 'success'});
					},
					// 账号冻结
					dongjie: function() {
						this.$message({message: '冻结成功', type: 'success'});
					}
				}
			})
			
		</script>
		
		
		
		
		
		
	</body>
</html>
